<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style>
        body {
            background: url("./image/a.png");
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;

        }

        .m {
            display: flex;

            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            height: 100vh;
            /* 设置容器高度为视口高度 */
            /*height: 100vh;
             是一种CSS属性设置，用于将一个元素的高度设置为视口（viewport）高度的100%。以下是对这个属性的详细解释：
            视口是指用户在浏览网页时，浏览器窗口的可见区域。
      它的大小会随着浏览器窗口的调整而改变。
            像素（px）：固定值，不随视口变化而变化。
      百分比（%）：相对于父元素的高度，而不是视口。
      视口高度（vh）：相对于视口的高度，适用于需要占满屏幕的场景。
            */
        }

        inputtt {

            border: none;
            /*移除边框 */
            outline: none;
            /* 移除聚焦时的轮廓线 */
            padding: 5px;
            /*可选：添加内边距 */


        }

        /*ctrl+alt+l 代码格式化，ctrl+/,vscode里添加注释idea*/
        input {
            /*背景色覆盖*/
            border: none;
            /* 移除边框 */
            background-color: transparent;
            /* 设置背景色为透明 */
            outline: none;
            /* 移除聚焦时的轮廓线 */
            padding: 5px;
            /* 可选：添加内边距 */
        }

        .aa {
            width: 200px;
            height: 200px;
        }
    </style>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" rel="external nofollow"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div class="m">
    <div class="aa" id="m">
        <form action="login" method="post" class="container">
            <table border="1">
                <tr>
                    <td colspan="4">用户名：<input type="text" id="username" name="username" v-model="name1"><span
                            id="showinfo"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="5">密码： <input type="password" id="password" name="password"
                                                 v-model="password1"><span id="showwinfo"></span></td>
                </tr>
                <tr class="btn-group btn-group-lg">
                    <td><button type="button" name="submit" class="btn btn-warning" width="100%" @click="que">
                        登录</button></td>
                    <td><a href="./ajax/add.html" class="btn btn-success ">注册</a></td>
                    <td><a href="./ajax/xiu.html" class="btn btn-success ">修改密码</a></td>
                    <td><a href="./ajax/dele.html" class="btn btn-success ">注销</a></td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script src="axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
    const { ref, createApp } = Vue;
    const aas = createApp({
        setup() {
            const name1 = ref('');
            const password1 = ref('');
            const que = async () => {
                let a = name1.value;
                let b = password1.value;
                try {
                    const { data } = await axios.get('./login', { params: { username: a, password: b } });

                    let n = data.bool;

                    if (n == true) {
                        alert('登录成功！');
                        // window.location.href = './serch.html';
                        window.location.replace('./serch.html');
                    } else {
                        alert('登录失败！');
                    }

                } catch (error) {
                    console.error('获取文本失败:', error);
                }

            }
            return {
                que, name1, password1
            }
        }
    })
    aas.mount('#m');
</script>
<script>
    $(function () {
        $("#username").blur(function () {
            var username = $(this).val();
            if (username == "") {
                $("#showinfo").html("用户名不能为空！");
                return;
            }
            $.ajax({
                url: 'ajax/queryloginname',
                type: 'POST',
                dataType: 'HTML',
                data: {
                    username: username,
                    arg: Math.random()
                },
                success: function (returndata) {
                    if (returndata == 'true') {
                        $("#showinfo").html("用户名存在");
                    } else {
                        $("#showinfo").html("用户名不存在！");
                    }
                }
            });
        });
        $("#password").blur(function () {
            var username = $("#username").val();
            var password = $(this).val();
            if (password == "") {
                $("#showwinfo").html("内容不能为空！");
                return;
            }
            $.ajax({
                url: 'ajax/queryloginpassword',
                type: 'POST',
                dataType: 'HTML',
                data: {
                    username: username,
                    password: password,
                    arg: Math.random()
                },
                success: function (redata) {
                    if (redata == 'true') {
                        $("#showwinfo").html("密码正确");
                    } else {
                        $("#showwinfo").html("密码不正确");
                    }
                }
            });
        });
    });
</script>
</body>

</html>